<template>
    <div class="main-content-center">
        <!-- <div class="breadcrumb">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item
                    ><a style="font-weight: 500;">智提升</a></el-breadcrumb-item
                >
                <el-breadcrumb-item><span>自评</span></el-breadcrumb-item>
            </el-breadcrumb>
        </div> -->
        <div class="big-title">
            自评
        </div>
        <div style="width:100%;display:flex; justify-content: flex-end;">
            <div class="search">
                <el-input v-model="ename" placeholder="请输入试卷名"></el-input>
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    style="margin-left:10px"
                    @click="search"
                    >搜索</el-button
                >
            </div>
        </div>
        <nav-select
            :navData="nav_Select"
            @getDataList="getDataList"
            @InitPage="InitPage"
            ref="navselect"
        ></nav-select>

        <div class="content-flex">
            <div class="content-flex-left">
                <template v-if="tibu.length == 0">
                    <tips :tipsText="'暂无数据'"></tips>
                </template>
                <template v-else>
                    <div
                        v-for="(item, index) in tibu"
                        :key="index"
                        class="selfEvaluation"
                    >
                        <div c class="left-item">
                            <div class="left-item-title">
                                <div style="font-size:16px">
                                    {{ item.ename }}
                                </div>
                                <div style="margin-top:10px">
                                    <el-tag size="mini">{{
                                        item.gradename
                                    }}</el-tag
                                    ><el-tag
                                        type="success"
                                        size="mini"
                                        style="margin-left:5px"
                                        >{{ item.subject_name }}</el-tag
                                    ><el-tag
                                        type="warning"
                                        size="mini"
                                        style="margin-left:5px"
                                        >{{ item.kind_type_id }}</el-tag
                                    >
                                </div>
                            </div>
                            <div
                                class="left-item-button"
                                @click="toReady(item.eid)"
                            >
                                开始自评
                            </div>
                        </div>
                        <el-divider
                            v-if="tibu.length != index + 1"
                        ></el-divider>
                    </div>
                    <div class="pagination">
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="page"
                            background
                            :page-size="pagesize"
                            layout="total, prev, pager, next, jumper"
                            :total="total"
                            :hide-on-single-page="true"
                        >
                        </el-pagination>
                    </div>
                </template>
            </div>

            <learning-situation></learning-situation>
        </div>

        <!-- 闯关弹窗 -->
        <el-dialog
            title="你还有有自评未做，需要继续自评吗？"
            :visible.sync="dialogTableVisible"
            v-if="dontFinshPop"
            :show-close="false"
            :close-on-click-modal="false"
            center
            width="400px"
            ><div class="image">
                <img
                    src="@/assets/images/exam/dontfinish.gif"
                    style="width:100%"
                />
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="click_alter(0)">放弃自评</el-button>
                <el-button type="primary" @click="click_alter(1)"
                    >继续自评</el-button
                >
            </div>
        </el-dialog>
    </div>
</template>

<script>
import navSelect from "@/components/navSelect/index";
import learningSituation from "@/components/learningSituation/index";
import { getSubject } from "@/api/testQuestions/subject";
import { getKind } from "@/api/testQuestions/kind";
import { examLists, SelfTestState } from "@/api/test/exam/index";
import { SelfTestEdit } from "@/api/test/selfTest/index";
import util from "@/utils/utilsTools";
import tips from "@/components/tips/index";
export default {
    components: {
        navSelect,
        learningSituation,
        tips
    },
    props: {},
    data() {
        return {
            total: 0,
            pagesize: 6,
            page: 1, //页数
            sNoData: false,
            ssNoData: false,
            isNoSection: false, // 是否没有章节
            showMore: false, //是否出现加载更多
            nav_Select: [], //导航列表1
            subjectList: [], //科目列表2
            kindList: [], //类型列表
            sid: "", //sid
            loading: null, //加载
            show_alter: false,
            sid1: null,
            zid: null,
            kind_type_id: "", //类型id
            section_name: null,
            dialogTableVisible: true, //弹窗显示
            tibu: [], //试卷数据
            ename: "", //搜索试卷名称
            dontFinshPop: false,
            selftest_log_id: "", // 自评记录id 【继续自评】进去 都要用到的参数
            eid: "" // 试卷id  // 判断是否有没有继续上次练习的弹窗
        };
    },
    computed: {},
    watch: {},
    beforeCreate() {
        // 生命周期钩子：组件实例刚被创建，组件属性计算之前，如 data 属性等
    },
    created() {
        // 生命周期钩子：组件实例创建完成，属性已绑定，但 DOM 还未生成，el 属性还不存在
        // 初始化渲染页面
    },
    beforeMount() {
        // 生命周期钩子：模板编译/挂载之前
    },
    async mounted() {
        // 生命周期钩子：模板编译、挂载之后（此时不保证已在 document 中）
        await this.getSubjectList();
        await this.getKindList();
        await this.getDataList();
        await this.getRecord();
        // this.getRecord1();
    },
    methods: {
        //获取科目列表
        getSubjectList() {
            var obj = {
                pagesize: 20,
                textbook: "renjiao"
            };
            getSubject(obj).then(res => {
                if (res.code === 200) {
                    this.subjectList = res.data;
                    this.sid = res.data[0].sid;
                    var subjectObj = {};
                    var max = 10;
                    if (res.data.length > max) {
                        subjectObj = {
                            fold: true,
                            index1: 0,
                            showTypeLength: max,
                            max: max,
                            checkName: "全部科目",
                            name: "科目",
                            list: res.data
                        };
                    } else {
                        subjectObj = {
                            max: max,
                            checkName: "全部科目",
                            name: "科目",
                            list: res.data
                        };
                    }
                    if (subjectObj.list) {
                        subjectObj.list.unshift({
                            subject_name: "全部科目",
                            sid: ""
                        });
                    }
                    this.nav_Select.push(subjectObj);
                }
            });
        },
        getKindList() {
            getKind({}).then(res => {
                console.log("res", res);
                if (res.code === 200) {
                    this.kindList = res.data;
                    this.kind_type_id = res.data[0].kind_type_id;
                    var kindObj = {};
                    var max = 10;
                    if (res.data.length > max) {
                        kindObj = {
                            fold: true,
                            index1: 0,
                            showTypeLength: max,
                            max: max,
                            checkName: "全部类型",
                            name: "类型",
                            list: res.data
                        };
                    } else {
                        kindObj = {
                            max: max,
                            checkName: "全部类型",
                            name: "类型",
                            list: res.data
                        };
                    }
                    if (kindObj.list) {
                        kindObj.list.unshift({
                            kind_type_name: "全部类型",
                            kind_type_id: ""
                        });
                    }
                    this.nav_Select.push(kindObj);
                }
            });
        },
        // 得到试卷列表
        getDataList(sid, kind_type_id, ename) {
            this.loading = this.$loading({
                lock: true,
                text: "加载中",
                spinner: "el-icon-loading",
                background: "rgba(255, 255, 255, 0.5)"
            });
            // 获取用户信息
            // 请求参数
            var testData = {
                lists_type: 1, // 1为系统试卷，2为个人试卷，3为班级试卷,4为学校试卷
                grade: this.$store.getters.userInfo.grade, // 用户的年级,
                page: this.page,
                pagesize: this.pagesize, // 每次只拿6条数据
                textbook: this.$store.getters.userInfo.textbook
            };
            if (sid && sid != "") {
                testData.sid = sid; // 科目id
            }
            if (kind_type_id && kind_type_id != "") {
                testData.kind_type_id = kind_type_id; // 类型id
            }
            if (ename && ename != "") {
                testData.ename = ename; // 试卷名称 搜索框传递
            }
            console.log("参数", testData);
            // 开始请求【试卷列表】
            examLists(testData).then(res => {
                console.log("数据列表", res);
                if (res.code == 200) {
                    this.total = res.data.total;
                    let data = res.data.data;
                    data.forEach(item => {
                        if (
                            item.kind_type_id == "" ||
                            item.kind_type_id == undefined
                        )
                            return;
                        item.kind_type_id = util.getKindName(item.kind_type_id);
                        item.gradename = util.getgradeName(item.grade);
                    });
                    this.tibu = data;
                    this.loading.close();
                } else {
                    this.tibu = [];
                    this.loading.close();
                }
                console.log("tibu", this.tibu);
            });
        },
        // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function(size) {
            this.pagesize = size;
            console.log(this.pagesize); //每页下拉显示数据
        },
        handleCurrentChange: function(currentPage) {
            this.page = currentPage;
            this.getDataList();
        },
        // 搜索
        search() {
            this.$refs.navselect.InitData();
            this.getDataList("", "", this.ename);
            this.ename = "";
        },
        InitPage() {
            this.page = 1;
        },
        // // 获取未完成列表
        getRecord() {
            SelfTestState({}).then(res => {
                console.log("继续自评", res);
                if (res.data.length != 0) {
                    this.dontFinshPop = true;
                    this.selftest_log_id = res.data[0].selftest_log_id; // 自评记录id
                    this.eid = res.data[0].eid; // 试卷id
                }
            });
        },
        click_alter(type) {
            if (type == 0) {
                //放弃自评
                var data = {
                    selftest_log_id: this.selftest_log_id,
                    state: 2
                };
                SelfTestEdit(data).then(res => {
                    if (res.code === 200) {
                        this.$message({
                            customClass: "customClass",
                            message: "放弃成功",
                            type: "success"
                        });
                    }
                });
            } else {
                this.$router.push({
                    path: "/selfEvaluation/examination/index",
                    query: {
                        eid: this.eid,
                        selftest_log_id: this.selftest_log_id,
                        examtime: 40
                    }
                });
            }
            this.dontFinshPop = false; // 关闭弹窗
        },
        toReady(eid) {
            this.$router.push({
                path: "/selfEvaluation/ready/index",
                query: {
                    eid: eid
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.main-content {
    .main-content-center {
        padding: 16px 32px;
        box-sizing: border-box;
    }
}
.main-content-center {
    .breadcrumb {
        margin-bottom: 20px;
    }
    .big-title {
        font-size: 20px;
        color: #2d3440;
        margin-bottom: 36px;
    }
}
.content-flex {
    margin-top: 24px;
    display: flex;
}
.image {
    width: 100%;
    text-align: center;
}
.content-flex-left {
    flex-grow: 1;
    border-radius: 8px;
}
.left-item {
    background: white;
    width: 100%;
    padding: 24px 32px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.left-item-button {
    padding: 3px 10px;
    border-radius: 15px;
    color: white;
    background: #018854;
    margin-left: 20px;
    cursor: pointer;
}
.pagination {
    padding: 20px 0px;
    .el-pagination {
        text-align: center;
    }
}
.search {
    display: flex;
    width: 100%;
}
</style>
